<template>
  <el-form-item :label="label">
    <Select
      v-model="value"
      showClear
      :filter="filter"
      :options="options"
      :option-label="optionLabel"
      :option-value="optionValue"
      :placeholder="'请选择' + label"
      @change="changeHandler"
    />
  </el-form-item>
</template>
<script>
export default {
  name: 'SearchSelect',
  emits: ['update:modelValue'],
  props: {
    modelValue: {
      required: true,
    },
    options: {
      type: Array,
      required: true,
    },
    label: {
      type: String,
      required: true,
    },
    optionLabel: {
      type: String,
      default: 'label',
    },
    optionValue: {
      type: String,
      default: 'value',
    },
    search: {
      type: Function,
    },
    filter: {
      type: Boolean,
      default: () => {
        return false
      },
    },
  },
  computed: {
    value: {
      get() {
        return this.modelValue
      },
      set(value) {
        this.$emit('update:modelValue', value)
      },
    },
  },
  methods: {
    changeHandler() {
      if (this.search) this.search(1)
    },
  },
}
</script>
